import { InfiniteScroll, NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import utils from '../../utils/index'
import { useNavigate } from 'react-router-dom'
const List = () => {
    const navigate=useNavigate()
    const {state}=useLocation()
    const {start,end}=state
    console.log(start,end);
    
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)
    const getData=async ()=>{
      const resp=await utils.post("/trip/train",{start,end,page})
      console.log(resp.data.data);
      setList([...list,...resp.data.data])
      setPage(page + 1)
    }
    useEffect(()=>{
      getData()
    },[])

    const back=()=>{
     navigate(-1)
    }
  return (
    <div>
      
      <NavBar onBack={back}>{state.start}————{state.end}</NavBar>
       <div>
          {
            list.map((v,i)=>{
                return <dl key={i} style={{
                    display: 'flex',
                    padding: 10,
                    justifyContent: 'space-around',
                     borderBottom: '1px solid #ccc'
                }}>
                  <dt>{v.start}—{v.end}</dt>
                  <dd>
                   <div>是否高铁:{v.isSeat ? "高铁" : "非高铁"}</div>
                   <div>是否有座:{v.isSpeed ? "有座" : "无座"}</div>
                  </dd>
                  <dd>
                   <div>商务座:{v.tick.vip}</div>
                   <div>一等座:{v.tick.firstTick}</div>
                   <div>二等座:{v.tick.secondTick}</div>
                  </dd>
                </dl>
            })
          }
       </div>
        <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  )
}

export default List
